import React from 'react';
import { View, Image, Text, router, hideMenuButton, ScrollView } from '@ray-js/ray';
import { useActions, useProps } from '@ray-js/panel-sdk';
import { useSelector, useDispatch } from 'react-redux';
import { NavBar, Switch, Loading, SwipeCell, Radio, RadioGroup } from '@ray-js/smart-ui';
import styles from './index.module.less';
import { selectSystemInfoByKey } from '@/redux/modules/systemInfoSlice';
import { weekTextShowHandle, showToastHandle, getDevId, isAllZeros, toTwoHex, hexToDecimal, hexToDecimalTwo } from '@/utils';
import Strings from '@/i18n';
import { TopBar, IconFont } from '@/components';
import { alarm, ic_more, radio_selected, radio_unselect, ic_custom_more } from '@/res/index'



function QuickTimer() {
  hideMenuButton()
  const dispatch = useDispatch();
  const actions = useActions();
  const statusBarHeight = useSelector(selectSystemInfoByKey('statusBarHeight'));

  const [loading, setLoading] = React.useState(false);
  let level = useProps(props => props.level)

  let timer_1 = useProps(props => props.timer_1)
  let timer_2 = useProps(props => props.timer_2)
  const timer_3 = useProps(props => props.timer_3)
  const timer_4 = useProps(props => props.timer_4)
  const timer_5 = useProps(props => props.timer_5)
  //  if (!timer_1) {
  //   timer_1="017f0000093b000a0200";
  //  }
  //  if (!timer_2) {
  //   timer_2="013e0a2b0d320005000a"; 
  //  }
  const timerArr = [timer_1, timer_2, timer_3, timer_4, timer_5].filter(item => item && !isAllZeros(item))
  console.log("timerArr", timerArr);
 

  /**
   * Handles the change event for a control element.
   * Updates the level value in the actions store with the event's detail value.
   * @param {Event} event - The change event object containing the new value in event.detail.value.
   */
  const onChange = event => {
    console.log("event", event.detail);
   if(timerArr.length==0&&event.detail=="custom"){  //没设置有定时不给选自定义.
    showToastHandle(Strings.getLang("str_add_mode_tips"))
     return
   }
    actions.level.set(event.detail)
  };


  function formatRunTime(m, s) {
    if (m == 0) {
      return parseInt(s) + Strings.getLang("str_second_unit")
    } else {
      return m + Strings.getLang("str_minute_unit") + s + Strings.getLang("str_second_unit")
    }

  }
  function formatPauseTime(m, s) {
    if (m == 0) {
      return parseInt(s) + Strings.getLang("str_second_unit")
    } else {
      return m + Strings.getLang("str_minute_unit") + s + Strings.getLang("str_second_unit")
    }

  }




  return (
    <View className={styles.view}>
      <TopBar title={Strings.getLang("str_mode")}></TopBar>


      <View className={styles.list}>

   
        <ScrollView className={styles.srcoll} scrollY >
          <RadioGroup value={level} onChange={onChange}>
            {


              <View className={level === "level_1"?styles.blockActive:styles.block} >
                <View className={styles.blockLeft} style={{ color: "#C2C2C2" }}>
                  <View className={styles.fontOne} style={{color:`${level === "level_1"?"#fff":"#69C3BB"}`}}>{Strings.getLang("str_quick_timer1")}</View>
                  <View className={styles.fontTwo} style={{color:`${level === "level_1"?"#fff":"#3D3D3D"}`}}>{Strings.getLang("str_run")}{formatRunTime(0, 20)}
                    {" | " + Strings.getLang("str_pause")}{formatPauseTime(2, 30)}</View>
                  <View className={styles.fontTwo} style={{color:`${level === "level_1"?"#fff":"#3D3D3D"}`}}>{Strings.getLang("dsc_everyday")}</View>
                </View>

                <Radio name='level_1' useIconSlot
                  slot={{
                    icon: (
                      <Image style={{ width: "45px", height: "45px", padding: "10px" }}
                        src={level === "level_1" ? radio_selected : radio_unselect}

                      />
                    ),
                  }} ></Radio>


              </View>

            }
            {


              <View className={level === "level_2"?styles.blockActive:styles.block} >
                <View className={styles.blockLeft} style={{ color: "#C2C2C2" }}>
                  <View className={styles.fontOne} style={{color:`${level === "level_2"?"#fff":"#69C3BB"}`}}>{Strings.getLang("str_quick_timer2")}</View>
                  <View className={styles.fontTwo} style={{color:`${level === "level_2"?"#fff":"#3D3D3D"}`}}>{Strings.getLang("str_run")}{formatRunTime(0, 30)}
                    {" | " + Strings.getLang("str_pause")}{formatPauseTime(2, 30)}</View>
                  <View className={styles.fontTwo} style={{color:`${level === "level_2"?"#fff":"#3D3D3D"}`}}>{Strings.getLang("dsc_everyday")}</View>
                </View>

                <Radio
                  name='level_2'
                  useIconSlot
                  slot={{
                    icon: (
                      <Image style={{ width: "45px", height: "45px", padding: "10px" }}
                        src={level === "level_2" ? radio_selected : radio_unselect}

                      />
                    ),
                  }} ></Radio>


              </View>

            }
            {


              <View className={level === "level_3"?styles.blockActive:styles.block} >
                <View className={styles.blockLeft} style={{ color: "#C2C2C2" }}>
                  <View className={styles.fontOne} style={{color:`${level === "level_3"?"#fff":"#69C3BB"}`}}>{Strings.getLang("str_quick_timer3")}</View>
                  <View className={styles.fontTwo} style={{color:`${level === "level_3"?"#fff":"#3D3D3D"}`}}>{Strings.getLang("str_run")}{formatRunTime(0, 40)}
                    {" | " + Strings.getLang("str_pause")}{formatPauseTime(2, 30)}</View>
                  <View className={styles.fontTwo} style={{color:`${level === "level_3"?"#fff":"#3D3D3D"}`}}>{Strings.getLang("dsc_everyday")}</View>
                </View>

                <Radio
                  name='level_3'
                  useIconSlot
                  slot={{
                    icon: (
                      <Image style={{ width: "45px", height: "45px", padding: "10px" }}
                        src={level === "level_3" ? radio_selected : radio_unselect}

                      />
                    ),
                  }} ></Radio>


              </View>

            }
            {


              <View className={level === "custom"?styles.blockActive:styles.block} >
                <View className={styles.blockRow} onClick={() => { router.push("/timer")} }>
                  <View className={styles.fontOne}   style={{color:`${level === "custom"?"#fff":"#69C3BB"}`}}>{Strings.getLang("str_custom_mode")}</View>
                   <Image style={{ width: "50rpx", height: "50rpx" }}
                        src={ic_custom_more}
                      />   
                </View>

                <Radio
                  name='custom'
                  useIconSlot
                  slot={{
                    icon: (
                      <Image style={{ width: "45px", height: "45px", padding: "10px" }}
                        src={level === "custom" ? radio_selected : radio_unselect}

                      />
                    ),
                  }} ></Radio>


              </View>

            }
          </RadioGroup>

        </ScrollView>
      </View>
      <View className={styles.Loading} style={{ display: `${loading ? 'flex' : "none"}` }}>
        <Loading size="60px" type='spinner' />
      </View>
    </View>
  );
}

export default QuickTimer;
